<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>隔壁老王1</li>
      <li>隔壁老王2</li>
      <li>隔壁老王3</li>

      <p>
        6、看下列代码输出为何?解释原因? var foo = "11"+2-"1"; console.log(foo);
        console.log(typeof foo);

        <!-- 体会加一个字符串'1' 和 减去一个字符串'1'的不同

        1 var foo = "11"+2-"1";
        2 console.log(foo); //111
        3 console.log(typeof foo); //number
        上述代码中的"11"+2结果是112，type是string，但是-“1”，使得foo转化成数字类型进行运算了。

        1 var foo = "11"+2+"1";
        2 console.log(foo); //1121
        3 console.log(typeof foo); //string
        而+“1”只是单纯字符串拼接。 -->
      </p>

      <p>
        7、已知有字符串 foo = "get-element-by-id",写一个 function 将其
        转化成驼峰表示法 "getElementById" ?

        <!-- var str = "get-element-by-id"
        function combo(msg){
            var arr = msg.split("-")
            for(var i=0;i<arr.length;i++){
                debugger
                var aa = arr[i].charAt(0)
                var bb = arr[i]
                arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].slice(1)
            }
            msg = arr.join("")
            return msg;
        }
        console.log(combo(str))
-->
      </p>

      <p>8、请介绍 javascript 的 splice() 方法?</p>

      <p>
        9、比较 attachEvent 和 addEventListener ?
        attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
        addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
      </p>

      <div class="yuan">10、请写出一个圆的 css 样式?</div>

      <p>
        11、如图,父元素 #content 大小未知,子元素 #inner 宽高都为 50px, 设置
        #inner 的样式，使其在 #content 的正中央显示。
      </p>

      <div id="content">
        <div id="inner"></div>
      </div>

      <p>
        12、编写 js 方法,找出数组 arr 中重复出现过的元素 输入例子:
        foo([1,2,4,4,3,3,1,5,3]).sort() 输出例子: [1,3,4] foo(arr){ //函数体 }
      </p>

      <p>
        13、编写 js 方法,提取 url 中的参数,并以 key-value 的形式返 回到一个 json
        结构中。 例: 输入: "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e"
        输出:{a:"1",b:"2",c:"",d:"xxx",e:undefined}
      </p>

      <p>
        14、请问以下代码输出的结果是什么?应该怎样使其输出0,1,2,3, for(var
        i=0;i<=3;i++) { setTimeout(function(){ console.log(i); },0) }
      </p>
    </ul>

    <script>
      // 1、合力亿捷有520员工，其中400名做项目开发，100名做产品开发，60名
      //             既做产品又做项目开发，请问既不做产品又不做项目员工多少名?

      //             只做项目开发：400-60=340
      //             只做产品开发：100-60=40
      //             开发总人数：340+40+60=440
      //             既不做产品又不做项目员工：520-440=80

      // 2、有7克、2克砝码各一个，天平一只，如何只用这些物品三次将140克的
      //       糖分成50、90克各一份？

      //       第一次称出9克（7+2）,第二次用第一次称出的9克加7克的砝码得到16克,
      //       用前两次所得25克（16+9）,第三次可称出25克,这三次所得加在一起就是50克,余下就是90克.

      //       第一次 7+2=9
      //       第二次 9+7=16 16+9=25
      //       第三次 25+9+16=50
      //       余下的 140-50=90

      //1.typeof 返回那些数据类型   nuber string boolean undefined function object

      //2.split ()只有一个参数时：分割的字符串或正则表达式；两个参数时，
      //第二个参数是指返回的数组中元素的个数； 2、join ()用于连接多个字符或字符串，返回值为一个字符串

      //3.事件委托
      // 事件委托就是利用事件冒泡，只指定一个事件处理程序，管理当前绑定下的所有元素的事件。
      // 一个事件触发后，会在子元素和父元素之间传播。这种传播分成三个阶段。
      // （1）捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件；
      // （2）目标阶段：在目标节点上触发，称为“目标阶段”
      // （3）冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

      var ul = document.getElementsByTagName("ul")[0];

      ul.onclick = function (e) {
        console.log(e.target.innerHTML);
      };

      // 4、添加 删除 替换 插入到某个节点的方法?

      // 1）创建新节点
      // createElement() //创建一个具体的元素
      // createTextNode() //创建一个文本节点
      // 2）添加、移除、替换、插入
      // appendChild() //添加
      // removeChild() //移除
      // replaceChild() //替换
      // insertBefore() //插入
      // 3）查找 getElementsByTagName() //通过标签名称
      // getElementsByName() //通过元素的Name属性的值
      // getElementById() //通过元素Id，唯一性

      //5.获取到页面中所有的checkbox 怎么做

      var foo = "11" + 2 - "1";
      console.log(foo); //111
      console.log(typeof foo); //nuber

      var foo1 = "get-element-by-id";
      function a(res) {
        var arr = res.split("-"); //以-为分割符截取字符串，返回数组
        for (var i = 1; i < arr.length; i++) {
          arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
        }
        res = arr.join(""); // 返回字符串
        return res;
      }

      console.log(a(foo1));

      // 6、看下列代码输出为何?解释原因?
      var foo = "11" + 2 - "1";
      console.log(foo); //111
      console.log(typeof foo); //number

      // 体会加一个字符串'1' 和 减去一个字符串'1'的不同

      var foo1 = "11" + 2 - "1";
      console.log(foo1); //111
      console.log(typeof foo1); //number
      // 上述代码中的"11"+2结果是112，type是string，但是-“1”，使得foo转化成数字类型进行运算了。

      var foo2 = "11" + 2 + "1";
      console.log(foo2); //1121
      console.log(typeof foo2); //string
      // 而+“1”只是单纯字符串拼接。

      // 7、已知有字符串 foo = "get-element-by-id",写一个 function 将其转化成驼峰表示法 "getElementById" ?

      var str = "get-element-by-id";
      function combo(msg) {
        var arr = msg.split("-");
        for (var i = 0; i < arr.length; i++) {
          // debugger
          var aa = arr[i].charAt(0);
          var bb = arr[i];
          arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
        }
        msg = arr.join("");
        return msg;
      }
      console.log(combo(str));

      // 8、请介绍 javascript 的 splice() 方法?

      // 1、删除（需要2个参数，第一个参数为“起始位”，第二个参数表示删除多少个）
      var array = [4, 5, 6, 7, 8, 9, 10, 11, 12];
      //删除，从第 0 个开始，删除一个元素。
      array.splice(0, 1);
      console.log(array); //结果为： [5,6,7,8,9,10,11,12]

      //  2、插入/添加值
      //  （在向一个数组中添加或者插入值的时候，我们需要3个参数，第一个为“起始位”，
      //  第二个为“要删除元素个数”，第二个以后为：“要插入的项”）
      var array1 = [1, 2, 3];
      //在向一个数组中添加或者插入值。
      array1.splice(1, 1, "添加值1", "添加值2", "添加值3");
      console.log(array1); //结果为： [1, "添加值1", "添加值2", "添加值3", 3]
      // 注意：从第一个开始，也就是原来数组中的“2”的位置，然后第二个参数表示删除一个，
      // 也就是要删除数字“2”，然后"添加值1","添加值2","添加值3" 为要新插入的值。
      // 如果我们不需要删除，那么第二个参数为“0”即可

      // 3、替换（其实替换和第二个方式一样，其实就是插入几个就删除几个，就达到效果了）
      var array2 = [1, 2, 3];
      //我们把2和3替换成5和6
      array2.splice(1, 2, 5, 6);
      console.log(array2); //结果为： [1, 5, 6]

      //  12、编写 js 方法,找出数组 arr 中重复出现过的元素
      // 输入例子:
      //  foo([1,2,4,4,3,3,1,5,3]).sort()
      // 输出例子: [1,3,4]

      // 1.这个应该好理解。 先对数组进行排序，判断前一个与后一个相等且没有保存的情况下，再把元素放到数组中去。
      // function foo(arr) {
      //     var newArr=[];
      //     arr.sort();
      //     for(var i =0;i<arr.length;i++){
      //         if(arr[i]==arr[i+1]&&(newArr.indexOf(arr[i])==-1) ){
      //             newArr.push(arr[i]);
      //             i++;
      //         }
      //     }
      //     return newArr;
      // }
      // var oaj= [1,2,4,4,3,3,1,5,3]
      // console.log(foo(oaj));

      // 2
      //             function duplicates(arr) {
      //             var a=[];
      //   for(var i=0;i<arr.length-1;i++) {
      //       for(var j=i+1;j<arr.length;j++) {
      //             if(arr[i]==arr[j]&&a.indexOf(arr[i])==-1)  {
      //                 a.push(arr[i]);
      //             }
      //      }
      // }
      //       return a.sort();
      // }

      // 13、编写 js 方法,提取 url 中的参数,并以 key-value 的形式返
      //             回到一个 json 结构中。
      //             例:
      //             输入:
      //             "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e"
      //             输出:{a:"1",b:"2",c:"",d:"xxx",e:undefined}
      function fn(a) {
        var index = a.indexOf("?");
        //   debugger
        var b = a.slice(index + 1); //把?后面的字符截取出来
        var c = b.split("&"); //以&为分割转换成数组
        var data = {};
        for (var i = 0; i < c.length; i++) {
          var d = c[i].split("="); //以=为分割 => ['a', '1']
          data[d[0]] = d[1]; //键值对形式保存 => {a: 1}
        }
        return data;
      }

      console.log(fn("https://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e"));

      //   14、请问以下代码输出的结果是什么?应该怎样使其输出0,1,2,3,
      for (let i = 0; i <= 3; i++) {
        setTimeout(function () {
          console.log(i);
        }, 0);
      }
    </script>
  </body>
</html>
